class CustomDndPanel{
    constructor ( {lf} ) {
        var _this = this;
        this.lf = lf;
        this.lf.setPatternItems = function (shapeList) {
            _this.setPatternItems(shapeList);
        };
    }
    render = function (_lf, domContainer) {
        var _this = this;
        this.destroy();
        if (!this.shapeList || this.shapeList.length === 0) {
            // 首次render后失败后，后续调用setPatternItems支持渲染
            this.domContainer = domContainer;
            return;
        }
        this.panelEl = document.createElement('div');
        this.panelEl.className = 'lf-custom-CustomDndPanel';
        this.shapeList.forEach(function (shapeItem) {
            var _a;
            (_a = _this.panelEl) === null || _a === void 0 ? void 0 : _a.appendChild(_this.createDndItem(shapeItem));
        });
        domContainer.appendChild(this.panelEl);
        this.domContainer = domContainer;
    };
    destroy = function () {
        if (this.domContainer &&
            this.panelEl &&
            this.domContainer.contains(this.panelEl)) {
            this.domContainer.removeChild(this.panelEl);
        }
    };
    setPatternItems = function (shapeList) {
        this.shapeList = shapeList;
        // 支持渲染后重新设置拖拽面板
        if (this.domContainer) {
            this.render(this.lf, this.domContainer);
        }
    };
    createDndItem = function (shapeItem) {
        var _this = this;
        var el = document.createElement('div');
        el.className = shapeItem.className
            ? "lf-custom-dnd-item ".concat(shapeItem.className)
            : 'lf-custom-dnd-item';
        var shape;        
        if (shapeItem.svg) {
            shape = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            // shape.className = 'lf-custom-dnd-shape';            
            if(shapeItem.svg.width && shapeItem.svg.height){
                shape.setAttribute('style',  `width:${shapeItem.svg.width}; height: ${shapeItem.svg.height};`);
            }
            const useElement = document.createElementNS('http://www.w3.org/2000/svg','use');
            if(shapeItem.svg.name){
                useElement.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href', '#icon-' + shapeItem.svg.name);
            }
            if(shapeItem.svg.color){
                useElement.setAttribute('fill', `${shapeItem.svg.color}`);
            }
            shape.appendChild(useElement);
            el.appendChild(shape);
        }        
        if (shapeItem.label) {
            var text = document.createElement('div');
            text.innerText = shapeItem.label;
            text.className = 'lf-custom-dnd-text';
            el.appendChild(text);
        }
        if (shapeItem.disabled) {
            el.classList.add('disabled');
            // 保留callback的执行，可用于界面提示当前shapeItem的禁用状态
            el.onmousedown = function () {
                if (shapeItem.callback) {
                    shapeItem.callback(_this.lf, _this.domContainer);
                }
            };
            return el;
        }
        el.onmousedown = function () {
            if (shapeItem.type) {
                _this.lf.dnd.startDrag({
                    type: shapeItem.type,
                    properties: shapeItem.properties,
                    text: shapeItem.text,
                });
            }
            if (shapeItem.callback) {
                shapeItem.callback(_this.lf, _this.domContainer);
            }
        };
        el.ondblclick = function (e) {
            _this.lf.graphModel.eventCenter.emit('dnd:panel-dbclick', {
                e: e,
                data: shapeItem,
            });
        };
        el.onclick = function (e) {
            _this.lf.graphModel.eventCenter.emit('dnd:panel-click', {
                e: e,
                data: shapeItem,
            });
        };
        el.oncontextmenu = function (e) {
            _this.lf.graphModel.eventCenter.emit('dnd:panel-contextmenu', {
                e: e,
                data: shapeItem,
            });
        };
        return el;
    };
}
CustomDndPanel.pluginName = 'customDndPanel';
export { CustomDndPanel };
